<template>
	<view class="content">
		<view class="Modal_mask" v-if="isCoin" @click.stop="closes"></view>
		<view class="Modal_mask" v-if="showGo" @click.stop="closeModal('showGo')"></view>
		<view class="Modal_mask" v-if="showCoin" @click.stop="closeModal('showCoin')"></view>
		<view class="Modal_mask" v-if="isPayPwd" @click.stop="closeModal('isPayPwd')"></view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<uni-nav-bar background-color="#1d2243" fixed color="#fff">
			<view slot="left"><image class="i_h_logo" src="/static/index/logo.png" mode=""></image></view>
			<view class="s_title">币币交易</view>
		</uni-nav-bar>
		<view class="quotation">
			<view class="quotation_top">
				<view class="top">
					<view class="left" @click="coinShow">
						<image class="menu" src="../../static/coin/menu.png" mode=""></image>
						<text>{{ title }}</text>
						<!-- <view class="num rise">+1.96%</view> -->
					</view>
					<view class="right">
						<image @click="goKline()" class="kline" src="../../static/coin/k_line.png" mode="aspectFit"></image>
						<image @click="showGo = true" class="three" src="../../static/coin/three.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<template v-if="type == 'BUY' || type == 'SELL'">
				<view class="quotation_pan">
					<view class="quotation_pan_main clear">
						<view class="pan_left max_min_buy">
							<view class="trade">
								<view class="btn" :class="type == 'BUY' ? 'buy' : ''" @click="type = 'BUY'">买入</view>
								<view class="thr_l" :class="type == 'BUY' ? 'buy' : ''"></view>
								<view class="thr_r" :class="type == 'SELL' ? 'sell' : ''"></view>
								<view class="btn" :class="type == 'SELL' ? 'sell' : ''" @click="type = 'SELL'">卖出</view>
							</view>
							<view class="lever">
								<view class="bk" @click="showSel">
									<text>{{ entrusts }}</text>
									<image src="../../static/coin/triangle.png" mode=""></image>
								</view>
								<!-- 选择 -->
								<view class="selList" v-if="isCoin">
									<view class="block" v-for="(item, index) in entrustLists" :key="index" @click="selCoin(item)">
										<text>{{ item }}</text>
									</view>
								</view>
							</view>
							<view class="math">
								<input v-model="price" :maxlength="priceMaxLength" type="digit" placeholder-class="pla" placeholder="金额" />
								<view class="arithmetic">
									<view class="reduce" @click="reduce('price')">-</view>
									<view class="add" @click="add('price')">+</view>
								</view>
							</view>
							<view class="little_word">≈{{ filter.fix(money, PRICEPRECISION) }} {{ coins }}</view>
							<view class="math">
								<input v-model="number" :maxlength="numberMaxLength" type="digit" placeholder-class="pla" placeholder="数量" />
								<text class="m_coin">{{ symbol }}</text>
							</view>
							<view class="little_word">可用 {{ filter.fix(maxNumber, AMOUNTPRECISION) }} {{ coins }}</view>
							<view class="sel">
								<slider style="margin: 26rpx 12rpx 0;" :value="leng" @change="sliderChange" :activeColor="type=='BUY'?'#03AD8F':'#D14B64'" backgroundColor="#c5cfd5" :block-color="type=='BUY'?'#03AD8F':'#D14B64'" block-size="18" />
							</view>
							<view class="avai">
								<text>0</text>
								<text>{{ filter.fix(maxNumber, AMOUNTPRECISION) }} {{ symbol }}</text>
							</view>
							<view class="jye">交易额 {{ filter.fix(filter.fix(number, AMOUNTPRECISION) * maxPrice, AMOUNTPRECISION) }} {{ coins }}</view>
							<template v-if="isLogin">
								<view class="submits buy_btn" v-if="type == 'BUY'" @click="buySell('BUY', false)">买入</view>
								<view class="submits sell_btn" v-if="type == 'SELL'" @click="buySell('SELL', false)">卖出</view>
							</template>
							<template v-else>
								<view @click="$api.goLogin('../login/login')" class="submits buy_btn" v-if="type == 'BUY'">买入</view>
								<view @click="$api.goLogin('../login/login')" class="submits sell_btn" v-if="type == 'SELL'">卖出</view>
							</template>
							<view class="tpis" v-if="!isLogin">请登录后进行买卖</view>
						</view>
						<view class="pan_right">
							<view class="p_r_title clear">
								<text class="fl">价格</text>
								<text class="fr">数量</text>
							</view>
							<view class="pan_sell_list">
								<view id="SELLLIST">
									<view class="item" v-if="sellList[0]" v-for="(item, index) in lastSellList" :key="index" :class="item.isUpdate ? 'update' : item.isAdd ? 'add' : item.isDel ? 'del' : '' " @click="setPrice(item.price)">
										<view class="item_list">
										<text class="fll">{{ filter.fix(item.price, PRICEPRECISION) }}</text>
										<text class="frr">{{ filter.fix(item.count, AMOUNTPRECISION) }}</text>
										</view>
										<text class="bg" :style="{ width: item.width }"></text>
									</view>
								</view>
							</view>
							<view class="average clear" @click="setPrice(average)">
								<text class="one" :class="type == 'BUY' ? 'buy' : ''">{{ filter.fix(average, PRICEPRECISION) }}</text>
								<text class="two">
									≈{{
										filter.fix(
											average *
												(coins == 'USDT'
													? COINRMB.tether
													: coins == 'BTC'
													? COINRMB.bitcoin
													: coins == 'ETH'
													? COINRMB.ethereum
													: coins == 'DUSD'
													? COINRMB.digitalusd
													: 6.58),
											PRICEPRECISION
										)
									}}CNY
								</text>
							</view>
							<view class="pan_buy_list">
								<view class="item" v-if="buyList[0]" v-for="(item, index) in lastBuyList" :class="item.isUpdate ? 'update' : item.isAdd ? 'add' : item.isDel ? 'del' : '' " :key="index" @click="setPrice(item.price)">
									<view class="item_list">
										<text class="fll">{{ filter.fix(item.price, PRICEPRECISION) }}</text>
										<text class="frr">{{ filter.fix(item.count, AMOUNTPRECISION) }}</text>
									</view>
									<text class="bg" :style="{ width: item.width }"></text>
								</view>
							</view>
							<!-- <picker @change="setDeep" :value="deep" :range="deepList">
								<view class="deep">
									<text>{{ deepList[deep] }}</text>
									<image src="../../static/coin/triangle.png" mode=""></image>
								</view>
							</picker> -->
						</view>
					</view>
					<view class="quotation_pan_new">
						<view class="title">
							<view class="left" v-if="levers == 0">
								<view :class="entrust == 'new' ? 'active' : ''" @click="enType('new')">最新成交</view>
								<view :class="entrust == 'now' ? 'active' : ''" @click="enType('now')">当前委托</view>
								<view :class="entrust == 'history' ? 'active' : ''" @click="enType('history')">历史委托</view>
							</view>
							<view class="left" v-if="levers == 2">
								<view :class="entrust == 'nor' ? 'active' : ''" @click="enType('nor')">普通委托</view>
								<view :class="entrust == 'plan' ? 'active' : ''" @click="enType('plan')">计划委托</view>
							</view>
							<view class="right" @click="$goPage('ensures/ensures')">
								<image src="../../static/coin/all.png" mode=""></image>
								<text>全部</text>
							</view>
						</view>
						<view v-if="entrust == 'new'">
							<view class="new_nav">
							  <text>价格</text>
							  <text>数量</text>
							  <text>时间</text>
							</view>
							<view class="new_list">
							  <view class="item" v-for="(item, index) in tradeList" :key="index" :class="item.isAdd && item.isAnimated === false ? 'isani' : ''" @click="setPrice(item.price)">
							    <text :class="item.type == 'BUY' ? 'buy' : 'sell'">{{ filter.fix(item.price, PRICEPRECISION) }}</text>
							    <text :class="item.type == 'BUY' ? 'buy' : 'sell'">{{ filter.fix(item.num, AMOUNTPRECISION) }}</text>
							    <text :class="item.type == 'BUY' ? 'buy' : 'sell'">{{ $formta(item.time * 1000, 'hh:mm:ss') }}</text>
							  </view>
							  <uni-load-more color="#c5cfd5" v-if="!tradeList[0]" status="noMore"></uni-load-more>
							</view>
						</view>
						
						<view class="n_list" v-if="entrust != 'new'">
							<view class="n_block" v-for="(item, index) in entrustList" :key="index" @click="$goPage('detail/detail')">
								<view class="top">
									<view class="left">
										<view class="buy sell" v-if="item.tradeCoinType == 'SELL'">卖</view>
										<view class="buy" v-else>买</view>
										<text class="wz">
											<text class="big">{{ coins }}/</text>
											<text class="small">{{ symbol }}</text>
										</text>
										<text class="time">{{ $formta(item.createTime, 'yyyy-MM-dd hh:mm') }}</text>
									</view>
									<view class="right" v-if="entrust == 'now'" @click.stop="cancelOrder(item)">撤单</view>
								</view>
								<view class="btm">
									<view>
										<view class="one">
											<text class="gray">委托总量:</text>
											{{ filter.fix(item.number, AMOUNTPRECISION) }} {{ ' ' + symbol }}
										</view>
										<text>
											<text class="gray">已成交量:</text>
											{{ filter.fix(item.tradedNumber, AMOUNTPRECISION) }} {{ ' ' + symbol }}
										</text>
									</view>
									<view class="right">
										<view class="one">
											<text class="gray">委托价格:</text>
											{{ filter.fix(item.price, PRICEPRECISION) }} {{ ' ' + coins }}
										</view>
										<text>
											<text class="gray">成交均价:</text>
											{{ filter.fix(item.matchedMoney, PRICEPRECISION) }} {{ ' ' + coins }}
										</text>
									</view>
								</view>
							</view>
							<view class="none" v-if="!entrustList[0]">
								<image src="../../static/c2c/none.png" mode=""></image>
								<view>暂无记录</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="have">
					<view class="block">
						<view class="top">
							<view class="one">
								<text>BTC/USDT永续</text>
								<view class="more">多头 10.00X</view>
							</view>
							<view class="two">
								<view class="left">
									<view class="small">开仓价格（USDT）</view>
									<view class="big">9593.19</view>
									<view class="small">预估强评价（USDT）</view>
									<view class="big">9593.19</view>
								</view>
								<view class="right">
									<view class="small">收益（USDT）</view>
									<view class="big">0.0000</view>
									<view class="small" style="margin-top: 8rpx;">收益率</view>
									<view class="big">0.00%</view>
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="one">
								<view>
									<view class="small">未实现盈亏（USDT）</view>
									<view class="ssmall">0.0000</view>
									<view class="small">保证金（USDT）</view>
									<view class="ssmall">0.00%</view>
								</view>
								<view>
									<view class="small">持仓量（张）</view>
									<view class="ssmall">0.0000</view>
									<view class="small">保证金率</view>
									<view class="ssmall">0.00%</view>
								</view>
								<view>
									<view class="small">可平量（张）</view>
									<view class="ssmall">0.0000</view>
									<view class="small">维持保证金率</view>
									<view class="ssmall">0.00%</view>
								</view>
							</view>
							<view class="two">
								<view class="btn" @click="showlever(index)" :class="inde == index ? 'active' : ''" v-for="(item, index) in btnList" :key="index">{{ item }}</view>
							</view>
						</view>
						<view class="b_line"></view>
					</view>
				</view>
			</template>
			<uni-popup :show="showSelect" position="middle" :h5-top="true" mode="fixed" @hidePopup="hidePopup()">
				<view class="quotation_select">
					<!-- <view class="s_header">
            <view class="left">
              <uni-icons type="search" :color="'#03bcc0'"></uni-icons>
              <input type="text" placeholder="交易对查询" />
            </view>
            <button class="right">取消</button>
          </view> -->
					<view class="s_nav">
						<block v-for="(item, index) in cexchange" :key="index">
							<button :class="item.name == pairs ? 'active' : ''" @click="setCoin(item.name)">{{ item.name }}</button>
						</block>
					</view>
					<view class="s_list clear">
						<block v-for="(item, index) in coinList" :key="index">
							<view
								class="fl"
								@click="goPage(`/pages/exchange/quotation/quotation?type=${item.symbol}&title=${item.title}&coin=${item.assetCode1}&symbol=${item.assetCode2}`)"
							>
								<!-- <image class="icon-cion" :src="'../../../static/coin/' + item.assetCode2.toLowerCase() + '@2x.png'"></image> -->
								<text>{{ item.title }}</text>
							</view>
						</block>
						<uni-load-more color="#c5cfd5" v-if="!coinList[0]" status="noMore"></uni-load-more>
					</view>
				</view>
			</uni-popup>
			<view v-show="showGo" @close="closeModal('showGo')" class="go_model">
				<view class="goto">
					<image style="width: 36rpx;height: 28rpx;" src="../../static/index/i1.png" mode="aspectFit"></image>
					<text>充币</text>
				</view>
				<view class="goto" @click="goTo('../assets/transfer/transfer')">
					<image style="width: 32rpx;height: 28rpx;" src="../../static/index/i3.png" mode="aspectFit"></image>
					<text>划转</text>
				</view>
				<view class="goto" @click="goTo('contractCalculator/contractCalculator')">
					<image style="width: 30rpx;height: 28rpx;" src="../../static/c2c/start1.png" mode="aspectFit"></image>
					<text>添加自选</text>
				</view>
			</view>
			<!-- 币种列表 -->
				<view class="msg_model" v-if="showCoin">
					<view class="Modal_title">选择币种</view>
					<view class="serach">
						<image src="../../static/search.png" mode=""></image>
						<input v-model="ssCoin" placeholder-class="pla" placeholder="搜索" type="text" value="" />
					</view>
					<view
						class="c_block"
						style="margin-bottom: 0;"
						v-for="(item, index) in coinList"
						:key="index"
						v-if="item.title.indexOf(ssCoin) > -1"
						@click="goSwitch(item.symbol,item.title,item.assetCode1,item.assetCode2,item.PRICEPRECISION,item.AMOUNTPRECISION)"
					>
						<text>
							<text class="one">{{ item.title }}</text>
						</text>
						<text class="add">{{ filter.fix(item.trade ? item.trade.newPrice : 0, item.PRICEPRECISION) }}</text>
					</view>
					<uni-load-more color="#c5cfd5" v-if="!coinList[0]" status="noMore"></uni-load-more>
				</view>
			
		</view>
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages"></HMmessages>

		<!-- 输入资金密码 -->
		<view class="pwdModel" v-if="isPayPwd">
			<view class="Modal_title">
				<text class="title">输入资金密码</text>
			</view>
			<view class="common_model">
				<view class="center_model">
					<view class="l_input">
						<text>资金密码</text>
						<input type="password" placeholder-class="pla" v-model="payPwd" placeholder="请输入资金密码" />
					</view>
				</view>
				<view class="common_btn">
					<view @click="closeModal('isPayPwd')">取消</view>
					<view class="active" @click="buySell(isPayPwd, true)">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import main from './main.js';
import Modal from '@/components/lkex-modal/index.vue';
import { uniIcon, uniPopup, uniLoadMore } from '@dcloudio/uni-ui';
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import HMmessages from '@/components/HM-messages/HM-messages.vue';
import { mapGetters } from 'vuex';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';

export default {
	components: {
		uniIcon,
		uniIcons,
		uniPopup,
		HMmessages,
		Modal,
		uniLoadMore,
		uniNavBar
	},
	computed: {
		...mapGetters(['COINRMB', 'USERINFO', 'AVOID', 'PAN', 'COINCONFIG'])
	},
	mixins: [main]
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
